<template>
  <div class="main">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="app-container" style="height: 120px">
          <div class="user-wrapper">
            <div class="user-header">
              <img alt="avatar" :src="avatar">
            </div>
            <div class="user-info">
              <div class="random-message">
                {{ welcomeMessage }}
              </div>
              <div class="user-dept">
                <span>{{ user.deptName ? user.deptName : $t('common.noDept') }}</span> | <span>{{ user.roleName ? user.roleName : $t('common.noRole') }}</span>
              </div>
              <div class="user-login-info">
                {{ $t('common.lastLoginTime') }}：<span id="last-login-time">{{ user.lastLoginTime ? user.lastLoginTime : $t('common.firstLogin') }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="app-container" style="height: 120px;padding: 0">
          <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
            <div class="count-header">
              <img alt="" :src="resolveIcon('count1.svg')">
              <span class="des">{{ $t('common.todayIp') }}</span>
              <countTo class="countTo todayIp" :start-val="0" :end-val="todayIp" :duration="3000" />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="app-container" style="height: 120px;padding: 0">
          <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
            <div class="count-header">
              <img alt="" :src="resolveIcon('count2.svg')">
              <span class="des">{{ $t('common.todayVisit') }}</span>
              <countTo class="countTo todayVisit" :start-val="0" :end-val="todayVisit" :duration="3000" />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="app-container" style="height: 120px;padding: 0">
          <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
            <div class="count-header">
              <img alt="" :src="resolveIcon('count3.svg')">
              <span class="des">{{ $t('common.TotalVisit') }}</span>
              <countTo class="countTo totalVisit" :start-val="0" :end-val="totalVisit" :duration="3000" />
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="app-container">
          <div id="visit-count-chart" style="width: 100%;height: 25rem" />
        </div>
        <div class="app-container">
          <div id="myChart" style="width: 100%;height: 25rem" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="app-container project-wrapper">
          <div class="project-header">
            <el-link type="primary" href="https://baike.baidu.com/item/%E9%87%91%E5%BA%B8" target="_blank" style="float: left;">{{ $t('common.allProject') }}</el-link>
          </div>
          <table>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[0].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[0].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[0].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[1].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[1].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[1].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[2].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[2].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[2].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[3].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[3].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[3].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[4].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[4].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[4].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[5].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[5].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[5].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[6].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[6].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[6].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[7].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[7].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[7].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[8].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[8].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[8].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[9].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[9].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[9].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[10].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[10].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[10].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[11].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[11].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[11].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[12].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[12].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[12].des }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="project-avatar-wrapper">
                  <el-avatar class="project-avatar">{{ projects[13].avatar }}</el-avatar>
                </div>
                <div class="project-detail">
                  <div class="project-name">
                    {{ projects[13].name }}
                  </div>
                  <div class="project-desc">
                    <p>{{ projects[13].des }}</p>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import { parseTime } from '@/utils'
import countTo from 'vue-count-to'
import resize from '@/components/Charts/mixins/resize'

export default {
  name: 'Dashboard',
  components: { countTo },
  mixins: [resize],
  data() {
    return {
      welcomeMessage: '',
      todayIp: 0,
      todayVisit: 0,
      totalVisit: 0,
      chart: null,
      myChart: null,
      projects: [
        {
          name: '飞狐外传',
          des: '',
          avatar: 'F'
        },
        {
          name: '雪山飞狐',
          des: '',
          avatar: 'X'
        },
        {
          name: '连城诀',
          des:
            '《连城诀》这个作品可能不大受人注意，却也有着相当深刻的思想，它写出了贪欲可以让人丧心病狂到何等可怕的地步，把师徒、父女等人伦关系全部破坏干净，令人震撼。',
          avatar: 'L'
        },
        {
          name: '天龙八部',
          des: '有情皆孽，无人不冤！',
          avatar: 'T'
        },
        {
          name: '射雕英雄传',
          des:
            '《射雕英雄传》是作者最富青春气息的作品，郭靖和黄蓉的爱情，也充溢着青春的热情和温柔、甜蜜与欢畅，同生共死的誓言和来日大难的忧惧，有迷惘、伤痛、误解却从没有刻骨铭心的伤害，更没有贪婪和欲望的污染。郭靖与黄蓉的爱情，就像每个人梦中的初恋，让少年人向往，让中年人伤痛，让老年人回忆。这种质朴、健康又极为明亮的色调在金庸的其他人物身上也是不复现的。',
          avatar: 'S'
        },
        {
          name: '白马啸西风',
          des:
            '这部小说的妙处，不在其武，而在其情；不在其侠，而在其孽；不在其善，而在其美；不在其事，而在其人；不在其热闹，而在其淡雅；不在其轰动，而在其感伤；不在其曲折，而在其深沉……可以说是平淡无奇却大有韵致。',
          avatar: 'B'
        },
        {
          name: '鹿鼎记',
          des:
            '有点武，有点侠，像是史，像是奇，是谓“四不像”，正是《鹿鼎记》的独创，亦正是《鹿鼎记》的精妙之诀。',
          avatar: 'L'
        },
        {
          name: '笑傲江湖',
          des:
            '这里没有真实的历史人物，没有明确的时代背景，使你根本无法明自这个故事发生在哪朝哪代；而书名为《笑傲江湖》，书中人物与故事又都是些纯粹的武林人物及江湖上事，似乎只有这一部小说才是真正的、纯粹的、十足十的“武侠小说了',
          avatar: 'X'
        },
        {
          name: '书剑恩仇录',
          des: '',
          avatar: 'S'
        },
        {
          name: '神雕侠侣',
          des:
            '到了《神雕侠侣》，金庸对于正统的儒家传统有所偏离，假如说，郭靖是一个合规合矩的英雄，那么杨过则是一个反叛的英雄。金庸在杨过身上，写出了一种道家文化的理想人格：顺其自然，至情至性。',
          avatar: 'S'
        },
        {
          name: '侠客行',
          des:
            '《侠客行》自然是一部极为好看的、引人入胜的小说。然而它真正的文学、艺术及其哲学与文化价值，则正藏蕴于这好看之中。正所谓雅俗共赏，值得再三读之，依旧会意味无穷。',
          avatar: 'X'
        },
        {
          name: '倚天屠龙记',
          des:
            '《倚天》是金庸作品更趋向浪漫、趋向超凡不羁的转型之作，这可以从金庸作品在《倚天》之后又奔向另一高峰得到证明。《倚天》不但是金庸作品更趋向丰富想象力的一部力作，也是感情上更浪漫的一部力作。',
          avatar: 'Y'
        },
        {
          name: '碧血剑',
          des: '',
          avatar: 'B'
        },
        {
          name: '鸳鸯刀',
          des: '',
          avatar: 'Y'
        }
      ]
    }
  },
  computed: {
    user() {
      return this.$store.state.account.user
    },
    avatar() {
      return require(`@/assets/avatar/${this.user.avatar}`)
    }
  },
  mounted() {
    this.welcomeMessage = this.welcome()
    this.initIndexData()
    this.initMyCharts()
    this.getiPCount()
  },
  methods: {
    resolveIcon(icon) {
      return require(`@/assets/icons/${icon}`)
    },
    getiPCount() {
      this.$get('system/user/index').then((r) => {
        const data = r.data.resultBody
        this.todayIp = data.todayIp
        this.totalVisit = data.totalVisitCount
        this.todayVisit = data.todayVisitCount
      })
    },
    welcome() {
      const date = new Date()
      const hour = date.getHours()
      const time =
        hour < 6
          ? this.$t('common.goodMorning')
          : hour <= 11
            ? this.$t('common.goodMorning')
            : hour <= 13
              ? this.$t('common.goodAfternoon')
              : hour <= 18
                ? this.$t('common.goodAfternoon')
                : this.$t('common.goodEvening')
      const welcomeArr = [
        this.$t('common.randomMessage.a'),
        this.$t('common.randomMessage.b'),
        this.$t('common.randomMessage.c'),
        this.$t('common.randomMessage.d'),
        this.$t('common.randomMessage.e'),
        this.$t('common.randomMessage.f'),
        this.$t('common.randomMessage.g'),
        this.$t('common.randomMessage.h'),
        this.$t('common.randomMessage.i')
      ]
      const index = Math.floor(Math.random() * welcomeArr.length)
      return `${time}, ${this.user.username}, ${welcomeArr[index]}`
    },
    initMyCharts: function () {
      this.myChart = echarts.init(document.getElementById('myChart'))

      const option = {
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          { type: 'line', smooth: true, seriesLayoutBy: 'row' },
          { type: 'line', smooth: true, seriesLayoutBy: 'row' },
          { type: 'line', smooth: true, seriesLayoutBy: 'row' },
          { type: 'line', smooth: true, seriesLayoutBy: 'row' },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      }

      this.myChart.setOption(option)
      // Enable data zoom when user click bar.
      const zoomSize = 6

      this.myChart.on('updateAxisPointer', event => {
        var xAxisInfo = event.axesInfo[0]
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1
          this.myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          })
        }
      })
    },
    initIndexData: function () {
      this.chart = echarts.init(document.getElementById('visit-count-chart'))
      var dataAxis = [
        '飞',
        '雪',
        '连',
        '天',
        '射',
        '白',
        '鹿',
        '笑',
        '书',
        '神',
        '侠',
        '倚',
        '碧',
        '鸳',
        '致',
        '敬',
        '金',
        '庸',
        '先',
        '生'
      ]
      const data = [
        220,
        182,
        191,
        234,
        290,
        330,
        310,
        123,
        442,
        321,
        90,
        149,
        210,
        122,
        133,
        334,
        198,
        123,
        125,
        220
      ]
      const yMax = 500
      const dataShadow = []

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
      }
      const option = {
        title: {
          text: '特性示例：渐变色 阴影 点击缩放',
          subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            // For shadow
            type: 'bar',
            itemStyle: {
              color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
          },
          {
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: data
          }
        ]
      }

      this.chart.setOption(option)
      // Enable data zoom when user click bar.
      const zoomSize = 6

      this.chart.on('click', params => {
        this.chart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        })
      })
    }
    // initIndexData: function() {
    //   this.$get('system/user/index').then((r) => {
    //     const data = r.data.data
    //     this.todayIp = data.todayIp
    //     this.totalVisit = data.totalVisitCount
    //     this.todayVisit = data.todayVisitCount
    //     const tenVisitCount = []
    //     const dateArr = []
    //     for (let i = 10; i >= 0; i--) {
    //       const time = parseTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i), '{m}-{d}')
    //       let contain = false
    //       for (const o of data.lastTenVisitCount) {
    //         if (o.days === time) {
    //           contain = true
    //           tenVisitCount.push(o.count)
    //         }
    //       }
    //       if (!contain) {
    //         tenVisitCount.push(0)
    //       }
    //       dateArr.push(time)
    //     }
    //     const tenUserVisitCount = []
    //     for (let i = 10; i >= 0; i--) {
    //       const time = parseTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i), '{m}-{d}')
    //       let contain = false
    //       for (const o of data.lastTenUserVisitCount) {
    //         if (o.days === time) {
    //           contain = true
    //           tenUserVisitCount.push(o.count)
    //         }
    //       }
    //       if (!contain) {
    //         tenUserVisitCount.push(0)
    //       }
    //     }
    //     this.chart = echarts.init(document.getElementById('visit-count-chart'))
    //     const option = {
    //       backgroundColor: '#FFF',
    //       title: {
    //         text: this.$t('common.visitTitle') + '\n',
    //         textStyle: {
    //           fontSize: 14
    //         }
    //       },
    //       tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //           type: 'shadow'
    //         }
    //       },
    //       legend: {
    //         data: [this.$t('common.you'), this.$t('common.total')],
    //         top: '18'
    //       },
    //       grid: {
    //         left: '3%',
    //         right: '5%',
    //         bottom: '3%',
    //         containLabel: true,
    //         show: false
    //       },
    //       toolbox: {
    //         feature: {
    //           dataView: { show: false, readOnly: false }
    //         }
    //       },
    //       xAxis: {
    //         type: 'category',
    //         boundaryGap: true,
    //         splitLine: {
    //           show: false
    //         },
    //         data: dateArr,
    //         axisLine: {
    //           lineStyle: {
    //             color: '#333'
    //           }
    //         }
    //       },
    //       yAxis: [
    //         {
    //           type: 'value',
    //           splitLine: {
    //             lineStyle: {
    //               type: 'dashed',
    //               color: '#DDD'
    //             }
    //           },
    //           axisLine: {
    //             show: false,
    //             lineStyle: {
    //               color: '#333'
    //             }
    //           },
    //           nameTextStyle: {
    //             color: '#999'
    //           },
    //           splitArea: {
    //             show: false
    //           }
    //         }],
    //       series: [
    //         {
    //           name: this.$t('common.you'),
    //           type: 'bar',
    //           barWidth: '25%',
    //           color: 'rgb(0, 227, 150)',
    //           data: tenUserVisitCount
    //         },
    //         {
    //           name: this.$t('common.total'),
    //           type: 'bar',
    //           barWidth: '25%',
    //           color: 'rgb(0, 143, 251)',
    //           data: tenVisitCount
    //         }
    //       ]
    //     }
    //     this.chart.setOption(option)
    //   })
    // }
  }
}
</script>
<style lang="scss">
  .main {
    .el-card {
      border: none;
      border-radius: 2px;
    }
    .el-table.server-table {
      th {
        height: 2.7rem;
        padding: 7px 0;
        border-right: none;
      }
      td {
        padding: 7px 0;
        border-right: none;
      }
    }
    .count-header {
      padding-left: 1rem;
      height: 120px;
      line-height: 120px;
      text-align: left;
      vertical-align: center;
      img {
        width: 3.8rem;
        margin-top: 1.8rem;
        vertical-align: top;
      }
      span {
        font-size: 15px;
        color: #606266;
        font-weight: 600;
        &.des {
          margin-left: 9px;
        }
      }
    }
    .todayIp {
      color: #27c6da !important;
    }
    .todayVisit {
      color: #fc573b !important;
    }
    .totalVisit {
      color: #be63f9 !important;
    }
  }
</style>
<style lang="scss" scoped>
.main {
  padding: 10px;
  .app-container {
    margin: 0 0 10px 0;
  }
  .user-container {
    padding: 15px;
  }
  .user-wrapper {
    width: 100%;
    display: inline-block;
    .user-header {
      display: inline-block;
      vertical-align: middle;
      img {
        width: 5rem;
        margin: 0.5rem 1rem;
        border-radius: 50%;
      }
    }
    .user-info {
      display: inline-block;
      vertical-align: middle;
      .random-message {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        color: #333;
      }
      .user-dept,
      .user-login-info {
        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.1rem;
      }
    }
  }
  .user-visits {
    text-align: center;
    padding-right: 2rem;
    margin-top: 1rem;
    vertical-align: middle;
    .num {
      font-weight: 600;
    }
  }
  .project-wrapper {
    padding: 0;
    .project-header {
      padding: 18px;
      margin-bottom: 16px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      td {
        width: 50%;
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.7rem;
        .project-avatar-wrapper {
          display: inline-block;
          float: left;
          margin-right: 0.7rem;
          .project-avatar {
            color: #42b983;
            background-color: #d6f8b8;
          }
        }
        &:nth-child(odd) {
          border-right: 1px solid #f1f1f1;
        }
      }
    }
    .project-detail {
      display: inline-block;
      float: left;
      text-align: left;
      width: 75%;
      .project-name {
        font-size: 0.9rem;
        margin-top: -2px;
        font-weight: 600;
      }
      .project-desc {
        color: rgba(0, 0, 0, 0.45);
        p {
          margin: 5px 0 0 0;
          font-size: 0.85rem;
          line-height: 1.4rem;
          white-space: normal;
        }
      }
    }
  }
  @media screen and (max-width: 1366px) {
    .user-info {
      max-width: 25rem;
    }
  }
  @media screen and (max-width: 1300px) {
    .user-info {
      max-width: 19rem;
    }
  }

  @media screen and (max-width: 1120px) {
    .user-info {
      max-width: 17rem;
    }
  }
}
</style>
